<template>
  <div class="capsule_container">
    <div class="cardTitle">
      <div class="inside">
        <i class="iconfont icon-qushi"></i>
        <div class="cardS">氧含量</div>
      </div>
    </div>
    <div class="chartStyle" ref="capsuleCharts"></div>
  </div>
</template>

<script>
// import { getOxygenData } from '../../api/tunnelApi'
export default {
  name: 'oxygen',
  data () {
    return {
      chartInstance: null,
      initOption: null,
      realData: null,
      labelData: [],
      capData: []
    }
  },
  created () {
  },
  mounted () {
    this.initChart()
  },
  destroyed () {
  },
  props: {
    oxygenData: {
      type: Object,
      required: true
    }
  },
  watch: {
    oxygenData: {
      handler (newVal, oldVal) {
        // console.log('newValssdad', newVal, oldVal)
        if (oldVal !== newVal && oldVal !== undefined) {
          this.updateChart(newVal)
        }
      },
      immediate: true
    }
  },
  beforeDestroy () {
    window.removeEventListener('resize', () => {
      this.chartInstance.resize()
    })
  },
  methods: {
    initChart () {
      this.initOption = {
        tooltip: {
          trigger: 'axis',
          textStyle: {
            fontSize: 12
          },
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(0, 255, 233,0)'
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(255, 255, 255,1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(0, 255, 233,0)'
                  }
                ],
                global: false
              }
            }
          }
        },
        grid: {
          top: '5%',
          left: '3%',
          right: '5%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisTick: { show: false },
          boundaryGap: false,
          data: this.labelData,
          axisLine: {
            lineStyle: {
              color: '#a6bde9'
            }
          },
          axisLabel: {
            interval: 'auto',
            formatter: function (value) {
              let ret = '' // 拼接加\n返回的类目项
              var maxLength = 6 // 每行最多个数
              var valLength = value.length // x轴一个项的总数
              var rowN = Math.ceil(valLength / maxLength)
              if (rowN > 1) { // 如果大于5个字符
                for (let i = 0; i < rowN; i++) {
                  let temp = ''
                  temp = value.substring(i * maxLength, i * maxLength + maxLength) + '\n'
                  ret += temp
                }
                return ret
              } else {
                return value
              }
            },
            textStyle: {
              fontSize: 8
            }
          }
        },
        yAxis: {
          // name: '温度(℃)',
          boundaryGap: false,
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#a6bde9',
              fontSize: 10
            }
          },
          nameTextStyle: {
            color: '#fff',
            fontSize: 12,
            lineHeight: 40
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#283352',
              type: 'dashed'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#283352'
            }
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            type: 'line',
            smooth: true, // 是否平滑
            showSymbol: false,
            symbol: 'circle',
            lineStyle: {
              normal: {
                width: 2,
                color: '#3fb594'
              }
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(79, 224, 171, 0.3)'
                    },
                    {
                      offset: 0.8,
                      color: 'rgba(88,255,255,0)'
                    }
                  ],
                  false
                )
              }
            },
            label: {
              show: false,
              position: 'top',
              textStyle: {
                color: '#fff',
                fontSize: 14
              }
            },
            itemStyle: {
              color: '#00DAFF',
              borderColor: 'rgb(0,115,100)',
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0)',
              shadowBlur: 0,
              shadowOffsetY: 0,
              shadowOffsetX: 0
            },
            tooltip: {
              show: true
            },
            data: this.capData
          }
        ]
      }
      this.chartInstance = this.$echarts.init(this.$refs.capsuleCharts)
      this.chartInstance.setOption(this.initOption)
      this.echartsResize()
    },
    echartsResize () {
      window.addEventListener('resize', () => {
        this.chartInstance.resize()
      })
    },
    updateChart (nal) {
      for (let index = 0; index < nal.createTime.length; index++) {
        nal.createTime[index] = nal.createTime[index].slice(5, 16)
      }
      const dataOption = {
        series: [{
          data: nal.oxygen
        }],
        xAxis: {
          data: nal.createTime // 数组
        }
      }
      this.chartInstance.setOption(dataOption)
    }
  }
}
</script>


